<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/assets/css/admin.css" rel="stylesheet" type="text/css">
    <link href="/assets/css/amazeui.css" rel="stylesheet" type="text/css">
    <link href="/css/personal.css" rel="stylesheet" type="text/css">
    <link href="/css/addstyle.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/address.js"></script>
    <th:block th:include="common.html :: source"></th:block>
    <script language="javascript" src="/js/province.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="/assets/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/assets/js/distpicker.js"></script>
    <script src="/assets/js/amazeui.js"></script>
</head>
<body onload='getProvince()'>
<th:block th:include="common.html :: header"></th:block>
<div class="i_bg bg_color">
    <div class="m_content">

        <div class="m_left" style="width: 211px">
            <div class="left_n">管理中心</div>
            <div class="left_m">
                <div class="left_m_t t_bg1">订单中心</div>
                <ul>
                    <li><a href="/order/getOrderList" >我的订单</a></li>
                </ul>
            </div>
            <div class="left_m">
                <div class="left_m_t t_bg2">会员中心</div>
                <ul>
                    <li><a href="/user/info" >用户信息</a></li>
                    <li><a href="/userAddress/getAddressList" >地址管理</a></li>
                </ul>
            </div>
        </div>

        <div class="m_right" >
            <div class="col-main" >
                <div class="main-wrap" style="margin-left: 10px">

                <!--例子-->
                <div class="am-modal am-modal-no-btn" id="doc-modal-1">

                    <div class="add-dress">

                        <!--标题 -->
                        <div class="am-cf am-padding">
                            <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">修改地址</strong> / <small>Update&nbsp;address</small></div>
                        </div>
                        <hr/>

                        <div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label for="user-name" class="am-form-label">收货人</label>
                                    <div class="am-form-content">
                                        <input type="text" id="user-name"  th:value="${address.consignee}">
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label for="user-phone" class="am-form-label">手机号码</label>
                                    <div class="am-form-content">
                                        <input id="user-phone" type="email" th:value="${address.phone}">
                                    </div>
                                </div>

<!--                                        <div class="am-form-group">-->
                                    <label class="am-form-label" style="position: absolute">所在地</label>
                                <div class="am-form-content address1">
                                    <div id="target"><!-- container -->
                                        <select id="province"></select><!-- 省 -->
                                        <select id="city"></select><!-- 市 -->
                                        <select id="area"></select><!-- 区 -->
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="user-intro" class="am-form-label">详细地址</label>
                                    <div class="am-form-content">
                                        <textarea class="" rows="3" id="user-intro"></textarea>
                                        <small>100字以内写出你的详细地址...</small>
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <div class="am-u-sm-9 am-u-sm-push-3">
                                        <a class="am-btn am-btn-danger" onclick="addAddress()">保存</a>
                                        <a href="javascript: void(0)" class="am-close am-btn am-btn-danger" data-am-modal-close>取消</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <input id="shen" type="hidden" th:value="${address.province}">
                        <input id="shi" type="hidden" th:value="${address.city}">
                        <input id="qu" type="hidden" th:value="${address.area}">
                        <input id="dizhi" type="hidden" th:value="${address.address}">
                        <input id="id" type="hidden" th:value="${address.id}">
                        <input id="type" type="hidden" th:value="${type}">
                    </div>

                </div>
                </div>
            </div>
        </div>

            </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            $(".new-option-r").click(function() {
                                $(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
                            });

                            var $ww = $(window).width();
                            if($ww>640) {
                                $("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
                            }

                        })
                    </script>
                    <script type="text/javascript">
                        $(function(){
                            let province = document.getElementById("shen").value;
                            let city =document.getElementById("shi").value;
                            let area =document.getElementById("qu").value;
                            let address = document.getElementById("dizhi").value;
                            document.getElementById("user-intro").value=address;
                            document.getElementById("city").value=document.getElementById("shen").value;
                            document.getElementById("area").value=document.getElementById("area").value;
                            $('#target').distpicker({
                                province: province,
                                city: city,
                                district: area
                            });
                        });
                    </script>

                    <script>
                        function addAddress() {
                            let id = document.getElementById("id").value;
                            let consignee = document.getElementById("user-name").value;
                            let phone = document.getElementById("user-phone").value;
                            let province = document.getElementById("province").value;
                            let city =document.getElementById("city").value;
                            let area =document.getElementById("area").value;
                            let address = document.getElementById("user-intro").value;
                            let type = document.getElementById("type").value;
                            window.location.href="/userAddress/updateAddress/"+id+"/"+consignee+"/"+phone+"/"+province+"/"+city+"/"+area+"/"+address+"/"+type;
                        }
                    </script>

                    <div class="clear"></div>

                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="common.html :: footer"></th:block>
<th:block th:include="common.html :: permit"></th:block>
</body>
</html>